<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <div class="select_box">
          <span :class="{active:status==1}" @click="status=1">角色权限</span>
          <span :class="{active:status==2}" @click="status=2">用户管理</span>
          <span :class="{active:status==3}" @click="status=3">企业管理</span>
          <span :class="{active:status==4}" @click="status=4">站点管理</span>
      </div>
      <div class="user" v-if="status==2">
        <user></user>
      </div>
      <div class="role" v-if="status==1">
          <role></role>
      </div>
      <div class="enterprise" v-if="status==3">
          <enterprise></enterprise>
      </div>
      <div class="stations" v-if="status==4">
          <stations></stations>
      </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { gets,del } from "@/services";
import { getSearchCriteria } from "@/utils/util"
import user  from "./components/user.vue"
import role  from "./components/role.vue"
import stations  from "./components/stations.vue"
import enterprise  from "./components/enterprise.vue"
export default {
  name: "Demo",
  components:{
     user,role,stations,enterprise
  },
  data() {
    return {
        status:null
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created() {
      this.status= this.$route.query.t || 1;
  },
  methods: {
 
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  border-radius: 4px;
}
.select_box{
    display: flex;
    border-bottom: 1px solid #F7F8FA;
    padding-left: 10px;
    span{
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #7A8794;
        height: 60px;
        line-height: 60px;
        margin: 0 20px;
        display: inline-block;
        cursor: pointer;
    }
    .active{
        border-bottom: 4px solid #206EF7;
        color: #242C43;
        font-weight: 550;
    }
}
</style>